<<if ($title)>><label for="<<$name>>"><<$title>></label><br><</if>>
<div style="z-index:100;position:relative;width:<<$width>>px;">
<input id="<<$id>>" type="text" readonly="readonly" title="<<$hint>>" <<$params>> class="impex_choice validate_<<$validate>>" style="width:<<$width>>px;">
<img id="<<$id>>_arrow" onclick="document.getElementById('<<$id>>').click()" src="site/resources/img/icons/down.png" height=27 style="cursor:pointer;position:absolute;top:0px;right:-20px;">
<input type="hidden" name="<<$name>>" value="">
<div class='valid_pictogram' id="pictogram_<<$id>>">&nbsp;</div>
<div class="listitems dropdown" id="<<$id>>_list" style="display:none;"></div>
</div>
<script>
validation(document.getElementById("<<$id>>"), <<$validationparams>>);
var <<$id>>_items = <<$itemlist>>;
var <<$id>>_opened = false;

<<if ($itemservice)>>
var <<$id>>_clickable = false;
var <<$id>>_servicedata = <<$itemservice>>;
callService(<<$id>>_servicedata.pagename, <<$id>>_servicedata.servicename, {}, {
    success : function(result) {
        if (result.items.length > 7) {
            jQuery("#<<$id>>_list").css({
                overflow : "scroll"
            });
        }
        for (var i = 0; i < result.items.length; i++) {
            <<$id>>_items.push(result.items[i].text);
        }
        <<$id>>_clickable = true;
        if (jQuery("#<<$id>>").val() != "") {
            var val = jQuery("#<<$id>>").val();
            if (isNaN(parseInt(val, 10))) {
                for (var i = 0; i < result.items.length; i++) {
                    if (result.items[i].text == val) {
                        val = i;
                        break;
                    }
                }
            }
            jQuery("input[type='hidden'][name='<<$name>>']").val(parseInt(val, 10)+1);
            jQuery("#<<$id>>").val(result.items[parseInt(val, 10)-1].text);
        } else {
            jQuery("#<<$id>>").val("<<$default>>");
        }
    }
});
<<else>>
var <<$id>>_clickable = true;
<</if>>

jQuery("#<<$id>>")
    .click(function() {
        if (!<<$id>>_clickable) { return; }
//        if (<<$id>>_opened) { return; }
        jQuery("div#<<$id>>_list")
            .show("fade", {}, 300)
        ;
        <<$id>>_opened = true;
        if (<<$id>>_items.length > 7) {
            jQuery("#<<$id>>_list").css({
                overflow : "scroll"
            });
        }
        jQuery("#<<$id>>_list").empty();
        for (var i = 0; i < <<$id>>_items.length; i++) {
            jQuery("#<<$id>>_list").append(jQuery("<div>")
                .attr("id", (i+1))
                .html(<<$id>>_items[i])
                .mouseover(function() {
                    jQuery(this).addClass("hovered");
                })
                .mouseout(function() {
                    jQuery(this).removeClass("hovered");
                })
                .click(function() {
                    <<$id>>_selecteditem = jQuery(this).attr("id");
                    jQuery("#<<$id>>")
                        .addClass("textentered")
                        .val(jQuery(this).text())
                    ;
                    jQuery("input[type='hidden'][name='<<$name>>']").val(jQuery(this).attr("id"));
                    jQuery("#<<$id>>_list").hide("fade", {}, 300);
                    jQuery("#<<$id>>_list").empty();
                    <<$id>>_opened = false;
                })
            );
        }
    })
;


<<if (!$itemservice)>>
if (jQuery("#<<$id>>").val() != "") {
    jQuery("input[type='hidden'][name='<<$name>>']").val(jQuery("#<<$id>>").val());
    jQuery("#<<$id>>").val(<<$id>>_items[parseInt(jQuery("#<<$id>>").val(), 10)-1]);
} else {
    jQuery("#<<$id>>").val("<<$default>>");
}
<</if>>

</script>
